<template>
	<view class="content">
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
		<view class="header">
			<u-icon size="26" name="plus" color="#F7EED" @click="add"></u-icon>
			<text class="title">计数器</text>
			<u-icon size="26" name="info" color="#F7EED"></u-icon>
		</view>
		<Item v-for="item in list" :key="item.id" :detail="item" @refresh="get_counter_list" />
		<u-popup :show="show" @close="close" @open="open" mode="center">
			<view class="form_wrap">
				<view class="counter_title">计数器标题</view>
				<u-form :model="form" ref="uForm" :rules="rules" class="form_wrap" labelWidth="auto">
					<u-form-item label="标题:" prop="target">
						<u-input v-model="form.target" placeholder="请输入标题" />
					</u-form-item>
					<u-form-item label="目标数量:" prop="target_amount">
						<u-input v-model="form.target_amount" placeholder="请输入数量" />
					</u-form-item>
					<u-form-item label="时间段:" prop="rang_time" label-width="auto">
						<view style="margin-right: 100rpx">
							{{form.range_time}}
						</view>
						<u-icon name="arrow-right" size="20" @click="calendar_show = true"></u-icon>
						<u-calendar :show="calendar_show" showLunar mode="range" @confirm="confirm">
						</u-calendar>
					</u-form-item>
				</u-form>
				<u-button type="primary" class="btn" @click="submit">确定</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Item from './components/item.vue'
	import {
		request
	} from '@/utils/request.js'

	export default {
		components: {
			Item
		},
		data() {
			return {
				rules: {
					target: {
						type: 'string',
						required: true,
						message: '请输入标题',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur']
					},
					target_amount: {
						type: 'string',
						required: true,
						message: '请输入目标数量',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur']
					},
					range_time: {
						type: 'string',
						required: true,
						message: '请选择任务时间段',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['change']
					}
				},
				list: [],
				title: 'Hello',
				show: false,
				form: {
					target: "",
					target_amount: "",
					start_time: "",
					end_time: "",
					range_time: ""
				},
				calendar_show: false,
			}
		},
		onShow() {
			this.get_counter_list()
		},
		onLoad() {
			this.get_counter_list()
		},
		computed: {
			defaultDateMultiple() {
				const d = new Date()
				const year = d.getFullYear()
				let month = d.getMonth() + 1
				month = month < 10 ? `0${month}` : month
				const day = d.getDate()
				return [`${year}-${month}-${day}`]
			}
		},
		methods: {
			confirm(e) {
				this.form.start_time = e[0]
				this.form.end_time = e[e.length - 1]
				this.form.range_time = e[0] && e[e.length - 1] ? `${e[0]} / ${e[e.length-1]}` : ""
				this.calendar_show = false
			},
			async get_counter_list() {
				const {
					data
				} = await request('GET', '/api/getCounter')
				this.list = data
			},
			submit() {
				this.$refs.uForm.validate().then(async () => {
					const {
						status
					} = await request('POST', '/api/addCounter', {
						...this.form,
					})
					if (status === 200) {
						this.$refs.uNotify.success('新增成功')
						this.get_counter_list()
					} else {
						uni.$u.toast('新增失败')
						this.$refs.uNotify.error('新增失败')
					}
					this.show = false
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
			add() {
				console.log('xxxx');
				this.show = true
				this.$nextTick(() => {
					// this.$refs.uForm.setRules(this.rules);
				})
			},
			open() {},
			close() {
				this.show = false
			}
		}
	}
</script>

<style>
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 30rpx;
		margin: 12rpx 0;
	}

	.title {
		font-size: 34rpx;
		font-weight: bolder;
	}

	.form_wrap {
		padding: 30rpx;
	}

	.counter_title {
		padding: 40rpx 30rpx;
		font-size: 36rpx;
		text-align: center;
	}

	.item_form {
		margin: 0 40rpx;
		width: 500rpx;
	}

	.item_input {
		width: 560rpx;
	}

	.btn {
		width: 600rpx;
	}
</style>
